<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form  :form="form" class="editforms">
          <a-row v-if="approvalType=='1'">
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('approve.mainDept','主部门')">
                  <div class="rx-handClose">
                      <a-input class="rx-inputs" style="width:calc(100% - 28px)"  readOnly v-decorator="['mainDepName', {rules: [{required: true, message: i18n('approve.mainDept','主部门','select')}]}]"/>
                      <span class="handClose" @click="openGroup">
                      <i class="iconfont iconsearch"></i>
                  </span>
                  </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('approve.reason','审批理由')">
                <a-textarea v-decorator="['note', {rules: [{required: true, message: i18n('approve.reason','审批理由','input')}]}]" :rows="8"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </rx-layout>
  </rx-dialog>
</template>
<script>
  import OsInstApi from "@/api/user/org/osInst";
  import {BaseForm, Dialog, RxDialog, RxGrid} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'OsInstApplyInstEdit',
    props:["instId","approvalType","tenantId"],
    mixins:[BaseForm],
    components: {
      RxDialog,
      RxGrid
    },
    data(){
      return {
        mainDepId:''
      }
    },
    methods: {
      i18n(name, text, key) {
          return this.$ti18(name, text, "osInst", key);
      },
      save(values){
        var data={id:this.instId,isAgree:this.approvalType,applyNote:values.note,mainDepId:this.mainDepId};
        return OsInstApi.agreeOrRefuse(data);
      },
      openGroup(){
        Dialog.openGroupDialog({curVm: this,data:{single:true,dimId:'1',showDimId:true,tenantId:this.tenantId}, widthHeight: ['1000px','600px']},function(self,data){
          self.mainDepId=data.groupId;
          self.form.setFieldsValue({'mainDepName': data.name})
        })
      }
    }
  }
</script>
<style scoped>
.rx-inputs{
    background-color: white;
}
.editforms .handClose:hover{
    border: 1px solid #1890ff;
    cursor: pointer;
}
.rx-handClose{
    position: relative;
}
.handClose{
    position: absolute;
    top: 3px;
    right: 0px;
    display: block;
    text-align: center;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-weight: 400!important;
    border-radius: 0px 5px 5px 0px;
    background-color: #f5f7fa;
    border: 1px solid #d9d9d9;
}
</style>